/* Next 2 needed for sticky footer - from https://getbootstrap.com/docs/5.0/examples/sticky-footer/ example */
html, body, form {
    height: 100% !important;
    flex-direction: column !important;
    display: flex !important;
    overflow-x: hidden !important;
}

/*login background*/
main {
    background-image: url('images/McDonalds_FWC_artwork.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left top;
}

/*header*/
header, header .container {
    background-color: unset !Important;
}

header {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

    header {
        border-bottom: none;
    }

/*logo area spacing*/
.navbar-brand img, .inner-logo {
    padding: 0px 0px !important;
}

.login-logo {
    margin-bottom: 90px;
}

@media only screen and (max-width: 767px) {
    .login-logo {
        padding-bottom: 41px;
        margin-bottom: 40px;
    }
}

header div.container-fluid.row.h-100 {
    padding: 0px !important;
}

.navbar {
    padding-top: 0px;
    padding-bottom: 0px;
}

.navbar-brand {
    padding-top: 0px;
}

/*width of login panel column*/
@media only screen and (min-width: 679px) and (max-width: 870px) {
    .col-lg-8 {
        width: 85% !important;
    }
}

@media only screen and (min-width: 871px) and (max-width: 991px) {
    .col-lg-8 {
        width: 67% !important;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1159px) {
    .col-lg-8 {
        width: 80% !important;
    }
}

@media only screen and (min-width: 1160px) and (max-width: 1369px) {
    .col-lg-8 {
        width: 70% !important;
    }
}

@media only screen and (min-width: 1370px) and (max-width: 1499px) {
    .col-lg-8 {
        width: 60% !important;
    }
}

@media only screen and (min-width: 1500px) and (max-width: 1899px) {
    .col-lg-8 {
        width: 50% !important;
    }
}

@media only screen and (min-width: 1900px) and (max-width: 1949px) {
    .col-lg-8 {
        width: 50% !important;
    }
}

@media only screen and (min-width: 1950px) and (max-width: 2449px) {
    .col-lg-8 {
        width: 40% !important;
    }
}

@media only screen and (min-width: 2450px) {
    .col-lg-8 {
        width: 35% !important;
    }
}

/*language flags*/
    /*.language-object {
        margin-bottom: 0px !important;
    }

    @media only screen and (max-width: 496px) {
        .language-object {
            padding-top: 0px !important;
            padding-bottom: 20px !important;
        }

            .language-object .Language {
                padding-right: 30px;
                padding-left: 0px !important;
            }
    }*/

/*text*/
.Normal a, a {
    color: var(--mcdonalds-red) !important;
    text-decoration: none !important;
}

    .Normal a:hover, a:hover, a:hover, #dnn_ContentPane a:hover {
        text-decoration: underline !important;
    }

body, p, .Normal p {
    color: var(--bs-body-color) !important;
}

.Normal p {
    padding-top: 0px;
    padding-bottom: 30px;
}


h1 {
    color: var(--bs-body-color) !important;
    font-family: 'Speedee Bold' !important;
}

#dnn_ContentPane a {
    word-break: break-word !important;
}

h2 {
    color: var(--bs-body-color) !important;
}

.col-form-label, .form-check-label {
    color: var(--bs-body-color) !important;
}

/*text and login panel*/
@media only screen and (max-width: 991px) {
    h1 {
        font-size: var(--mcdonalds-h1-login-size-mobile) !important;
        line-height: 33px !important;
        margin-top: 51px !important;
        margin-bottom: 20px !important;
    }
    .LoginPanel {
        margin-bottom: 40px !important;
    }
    #dnn_ContentPane a {
        word-break: unset !important;
    }
}
/*text and pane padding*/
@media only screen and (min-width: 992px) {
    h1 {
        font-size: var(--mcdonalds-h1-login-size) !important;
        line-height: 43px !important;
        margin-top: 40px !important;
        margin-bottom: 35px !important;
    }
    #dnn_HeaderPane, #dnn_ContentPane {
        padding-right: 0px !important;
    }
}

/*login panel content*/
/*form*/
form {
    flex-direction: column !important;
    display: flex !important;
    margin-block-end: 0;
}

.form-control, .form-control:focus, .LoginPanel input[type="password"] {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: 'Speedee Regular', san-serif;
    border: 1px solid var(--bs-body-color) !important;
    border-radius: var(--mcdonalds-button-radius) !important;
    box-shadow: none;
    outline: none;
    margin-bottom: 0px;
    border-radius: unset;
}

@media only screen and (min-width: 768px) {
    .col-md-8 {
        width: 100% !important;
    }
}

/*form button*/
.button, .btn, .btn-primary, button:not(:disabled) {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-tertiary-color) !important;
    padding: 10px 40px !important;
    letter-spacing: 2px !important;
    font-family: 'Speedee Bold', san-serif;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: var(--mcdonalds-button-radius);
}

button.w-100 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

button:hover, .btn:hover, .dnnPrimaryAction:hover {
    background-color: var(--mcdonalds-gold-low-opacity) !important;
}

    .ui-menu-item {
        color: var(--bs-body-color) !important;
    }

    /*login panel box styling and page padding*/
    #mcdonalds-login {
        background-color: var(--bs-body-bg);
        border-radius: var(--mcdonalds-border-radius);
    }


@media only screen and (max-width: 991px) {
    #mcdonalds-login {
        margin-bottom: 60px !important;
        margin-left: 2rem !important;
        margin-right: 2rem !important;
        margin-top: 60px;
        padding: 35px !important;
    }
}

    @media only screen and (min-width: 992px) {
        #mcdonalds-login {
            margin-bottom: 120px !important;
            /*margin-left: 140px !important;*/
            margin-top: 150px;
            padding: 55px !important;
        }

        .ps-5, pe-5 {
            margin-left: 8rem;
        }

        .ps-4, pe-4 {
            margin-left: 8rem !important;
            margin-right: 8rem !important;
        }
    }

    /*page padding*/
    @media only screen and (min-width: 992px) and (max-width: 1400px) {
        .ps-4 {
            padding-left: 1.5rem !important;
        }

        .pe-4 {
            padding-right: 1.5rem !important;
        }
    }

    @media only screen and (min-width: 1401px) and (max-width: 1919px) {
        .ps-4 {
            padding-left: 1.5rem !important;
        }

        .pe-4 {
            padding-right: 1.5rem !important;
        }
    }

    @media only screen and (min-width: 1920px) {
        .ps-4 {
            padding-left: 1.5rem !important;
        }

        .pe-4 {
            padding-right: 1.5rem !important;
        }
    }


    /*login panel main logo*/
/*@media only screen and (max-width: 599px) {
    .mt-5 {
            margin-top: 1.5rem !important;
        }
    }

    @media only screen and (min-width: 600px) and (max-width: 767px) {
        .mt-5 {
            margin-top: 0.5rem !important;
        }
    }

    @media only screen and (min-width: 860px) and (max-width: 991px) {
        .mt-5 {
            margin-top: 1.2rem !important;
        }
    }*/


    /*forgotten password link*/
    .LoginPanel .forgotPasswordLink {
        color: var(--mcdonalds-red) !important;
        float: right;
        text-align: right;
        text-decoration: none;
        font-family: 'Speedee Regular', sans-serif;
    }

        .LoginPanel .forgotPasswordLink:hover {
            text-decoration: underline !important;
        }

@media only screen and (max-width: 469px) {
    .LoginPanel .justify-content-end button {
        transform: translate(0%,70%);
    }
}

@media only screen and (max-width: 575px) {
    .LoginPanel .forgotPasswordLink {
        transform: translate(0%, -200%);
    }
}


@media only screen and (min-width: 470px) and (max-width: 480px) {
    .LoginPanel .forgotPasswordLink {
        padding-left: 200px;
        transform: translate(0%, -100%);
    }
}

        /*forgotten password button*/
.row.justify-content-end.mb-3 {
    padding-top: 20px;
}

@media only screen and (max-width: 991px) {
    .row.justify-content-end.mb-3 {
        padding-top: 0px;
    }
}

.LoginPanel .mb-3, .ChangePasswordPanel .mb-3 {
    padding-bottom: 20px;
}

@media only screen and (min-width: 576px) and (max-width: 656px) {
    div.row.justify-content-end.mb-3 button {
        width: 122%;
    }
}

@media only screen and (min-width: 679px) and (max-width: 772px) {
    div.row.justify-content-end.mb-3 button {
        width: 122%;
    }
}

@media only screen and (min-width: 871px) and (max-width: 979px) {
    div.row.justify-content-end.mb-3 button {
        width: 122%;
    }
}

    @media only screen and (min-width: 1500px) and (max-width: 1520px) {
        div.row.justify-content-end.mb-3 button {
            width: 122%;
        }
    }

    /*form fields*/
    @media (min-width: 768px) {
        .LoginPanel input[type="text"], .LoginPanel input[type="password"] {
            width: 100% !important;
        }
    }

    /*form validation*/
    .invalid-feedback, .dnnRegistrationForm .dnnFormError, span#Input_UserName-error, #Input_Password-error {
        color: var(--mcdonalds-red);
        border-radius: unset;
        margin-top: 10px;
        margin-bottom: 0px;
        font-size: var(--mcdonalds-validation-size);
        font-family: 'Speedee Bold' !important;
    }

    .is-invalid#Input_Password {
        margin-bottom: 20px;
    }

    .validation-summary-errors, .text-danger, code, li::marker {
        color: var(--mcdonalds-red) !important;
        font-size: var(--mcdonalds-validation-size);
        font-family: 'Speedee Bold' !important;
        margin-top: 20px;
    }

    ol.list li::marker {
        color: unset !important;
        font-size: unset !important;
        font-family: 'Speedee Regular' !important;
        margin-top: unset !Important;
    }

    .text-danger.validation-summary-errors ul {
        margin-bottom: 0px !important;
    }

    .text-danger.validation-summary-errors ul {
        margin-left: 20px !important;
    }

    .form-control.is-invalid, .form-control.is-invalid {
        margin-bottom: 20px;
    }


    /*RSVP*/
    .RSVPPanel .invalid-feedback {
        margin-bottom: 20px;
    }

    .RSVPPanel {
        margin-bottom: 35px;
    }

label {
    display: inline !important;
}

#qrCode {
    margin-bottom: 10px !important;
}

    /*.RSVP .btn, .btn-primary, button:not(:disabled) {
        margin-top: 38px;
    }*/

    /*reset password*/
    .ResetPasswordPanel .mb-3 {
        padding-bottom: 20px;
    }

    @media only screen and (min-width: 992px) {
        .LoginPanel .justify-content-end a {
            transform: translate(0%,-70%) !Important;
        }
    }


    /*Sing-up Page DNN module specific*/
    div.dnnRegistrationForm {
        width: 100%;
        min-width: inherit;
    }

        div.dnnRegistrationForm .dnnForm {
            min-width: 0;
            width: 100%;
        }

    .dnnRegistrationForm .dnnActions {
        clear: both;
    }

    .dnnRegistrationForm ul {
        list-style: none;
        padding-left: 0;
        justify-content: revert;
        display: inline-flex;
        gap: 20px;
        margin-top: 20px !important;
        transform: translateX(-10px);
    }

@media only screen and (min-width: 922px) {
    .dnnRegistrationForm ul {
        margin-left: 20px !important
    }
}

    .dnnRegistrationForm li a {
        background-color: var(--bs-tertiary-bg) !important;
        color: var(--bs-tertiary-color) !important;
        padding: 10px 40px !important;
        letter-spacing: 2px !important;
        font-family: 'Speedee Bold', san-serif;
        margin-top: 0;
        margin-bottom: 0;
        border-radius: var(--mcdonalds-button-radius);
        text-transform: uppercase;
    }

    .dnnRegistrationForm li {
        width: auto;
    }


    .dnnRegistrationForm input {
        background: var(--bs-body-bg);
        color: var(--bs-body-color);
        font-family: 'Speedee Regular', san-serif;
        border: 1px solid var(--bs-body-color) !important;
        border-radius: var(--mcdonalds-button-radius) !important;
        box-shadow: none;
        outline: none;
        margin-bottom: 0px;
        border-radius: unset;
        width: 60%;
    }

    .password-strength-container {
        width: 60%;
    }

    .dnnRegistrationForm li a {
        background-color: var(--bs-tertiary-color);
        color: var(--bs-body-color);
        text-decoration: none;
    }

        .dnnRegistrationForm li a:hover {
            background-color: var(--mcdonalds-gold-low-opacity) !important;
            color: var(--bs-body-color);
            text-decoration: none;
        }

    .dnnRegistrationForm .dnnCheckbox {
        border: unset;
        display: inline-flex;
    }

    .dnnRegistrationForm .dnnCheckbox {
        display: none !important;
    }

    .dnnRegistrationForm input[type=checkbox] {
        position: unset !important;
        width: auto !important;
        opacity: unset !important;
        z-index: unset !important;
    }

    .dnnRegistrationForm .dnnTooltip {
        display: none;
    }

    .dnnRegistrationForm .dnnFormItem .dnnFormShort {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .dnnRegistrationForm .dnnLabel {
        margin-bottom: 30px;
        width: 33%;
        margin-right: 20px;
    }

@media only screen and (min-width: 1500px) and (max-width: 1508px) {
    .dnnRegistrationForm .dnnLabel {
        width: 30%;
    }
}

@media only screen and (min-width: 922px) and (max-width: 971px) {
    .dnnRegistrationForm .dnnLabel {
        width: 30%;
    }
}

    .dnnRegistrationForm .dnnLabel label {
        color: var(--bs-body-color) !important;
        white-space: break-spaces;
    }

    .dnnRegistrationForm .dnnFormError {
        color: var(--mcdonalds-red);
        font-size: var(--mcdonalds-validation-size);
        font-family: 'Speedee Bold', san-serif;
        border-radius: unset;
        transform: translate(0px, -20px);
        float: left;
        /*margin-left: 37%;*/
        width: 66%;
    }


    .dnnRegistrationForm input[type=checkbox] .dnnFormError {
        margin-top: 30px;
    }

    /*reg form - spaces between fields*/
    .dnnFormItem.dnnFormShort {
        margin-bottom: 5px;
    }

    @media only screen and (max-width: 992px) {
        .dnnFormItem.dnnFormShort {
            margin-bottom: 20px;
        }
    }

    @media only screen and (max-width: 767px) {
        .dnnRegistrationForm input, .dnnRegistrationForm .dnnLabel {
            width: 100%;
        }

        .dnnRegistrationForm input {
            margin-top: calc(.375rem + 1px);
        }

        .dnnRegistrationForm .dnnLabel {
            margin-bottom: 0px;
        }

        .dnnRegistrationForm ul {
            display: inline-block;
            width: unset !important;
            padding-left: 10px;
            padding-top: 20px;
        }

        .dnnRegistrationForm li:nth-last-child(2) {
            margin-bottom: 30px !important;
            margin-right: 0px;
        }

        .dnnRegistrationForm .dnnFormError {
            margin-left: unset;
            width: 100% !important;
            margin-top: 25px;
        }
    }

    @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .dnnRegistrationForm .dnnActions {
            display: inline-block;
        }

        .dnnRegistrationForm li {
            margin-bottom: 30px;
        }
    }


    /*Registration Page*/
    #dnn_ContentPane a:hover {
        text-decoration: none !important;
    }

    @media only screen and (max-width: 767px) {
        div .dnnFormItem.dnnClear {
            display: flex;
        }

        .password-strength-container, .dnnFormItem .password-strength-container input {
            width: 100% !important;
        }
    }

    .dnnFormInfo {
        padding-top: 40px;
        padding-bottom: 30px;
    }